import { ReactNode } from "react";
import styled from "styled-components";
import { HeartFilled, MessageOutlined, StarFilled } from "@ant-design/icons";
import { Avatar } from "@/ui/cpts/std/Avatar";
import { XHSNote } from "@common/models";
import { Tooltip } from "antd";
import { Typography } from "antd";

const NoteStatusIconWrapper = styled.div<{ $iconColor?: string }>`
  display: flex;
  align-items: center;

  .icon-area {
    color: ${(props) => props.$iconColor ?? "black"};
  }

  .icon-count {
    margin-left: 4px;
    font-size: 12px;
    display: flex;
    align-items: center;
  }
`;

function NoteStatusIcon(props: {
  count: number | string;
  children: ReactNode;
  iconColor?: string;
}) {
  const { count, iconColor, children } = props;
  return (
    <NoteStatusIconWrapper $iconColor={iconColor}>
      <div className={"icon-area"}>{children}</div>
      <div className={"icon-count"}>{count}</div>
    </NoteStatusIconWrapper>
  );
}

const NoteStatusWrapper = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;

  .note-title {
    display: flex;
    align-items: center;
    font-size: 14px;

    &__value {
      max-width: 400px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      color: grey;
    }

    &__author {
      margin-right: 10px;
      font-weight: bolder;
    }
  }

  .note-status-icons {
    display: flex;
    align-items: center;

    > * {
      margin-left: 20px;
    }
  }
`;

export function NoteStatus(props: { note: XHSNote }) {
  const { note } = props;
  return (
    <NoteStatusWrapper className={"note-status"}>
      <div className={"note-title"}>
        <Avatar src={note.user.avatar} alt={"CN"} />
        &nbsp;
        <div className={"note-title__author"}>{note.user.nickname}</div>
        <div className={"note-title__value"}>
          <Typography.Text
            copyable={{
              text: `https://www.xiaohongshu.com/explore/${note.noteId}?xsec_token=${note.xsecToken}&xsec_source=pc_user`,
              tooltips: ["复制笔记链接", "复制成功"],
            }}
          >
            {note.title}
          </Typography.Text>
        </div>
      </div>

      <div className={"note-status-icons"}>
        <NoteStatusIcon
          count={note.interactInfo.likedCount}
          iconColor={"#ff7979"}
        >
          <Tooltip
            placement={"bottom"}
            title={note.interactInfo.liked ? "已喜欢" : "未喜欢"}
          >
            <HeartFilled />
          </Tooltip>
        </NoteStatusIcon>

        <NoteStatusIcon
          count={note.interactInfo.collectedCount}
          iconColor={"#ffe004"}
        >
          <Tooltip
            placement={"bottom"}
            title={note.interactInfo.collected ? "已收藏" : "未收藏"}
          >
            <StarFilled />
          </Tooltip>
        </NoteStatusIcon>

        <NoteStatusIcon count={note.interactInfo.commentCount}>
          <MessageOutlined />
        </NoteStatusIcon>
      </div>
    </NoteStatusWrapper>
  );
}
